import { useState, useCallback, useEffect, useRef } from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from 'react-router-dom';
import CompanyService from "../../app/services/companyService";
import { showNotification } from "../common/headerSlice";
import Pagination from "../../components/Pagination";
import PencilIcon from "@heroicons/react/24/outline/PencilIcon";
import CommonService from "../../app/services/commonService";
import PlusIcon from "@heroicons/react/24/outline/PlusIcon";
import UserService from "../../app/services/userService";
import TitleCard from "../../components/Cards/TitleCard";
import { NotificationManager } from "react-notifications";

import MagnifyingGlassIcon from "@heroicons/react/24/outline/MagnifyingGlassIcon";
import CompanyUserService from "../../app/services/companyUserService";
import { EyeIcon } from "@heroicons/react/24/outline";
import { NewspaperIcon } from "@heroicons/react/16/solid";
import { StudentStatus } from "../../app/const/const";

import _ from "lodash";

function MineUser() {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const [data, setData] = useState([]);
  const [total, setTotal] = useState(0);
  const [queryParams, setQueryParams] = useState({
    pageIndex: 1,
    userName: '',
    status: -1
  });//[pageIndex, pageSize, searchKey, status



  const fetchData = useCallback(() => {
    CommonService.setLoading(true);
    CompanyUserService.mine(queryParams).then((res) => {
      if (res.success) {
        setData(res.data);
        setTotal(res.total);
      } else {
        dispatch(
          showNotification({
            message: "获取数据失败",
            status: "error",
          })
        );
      }
    }).finally(() => {
      CommonService.setLoading(false);
    });
  }, [queryParams.pageIndex, queryParams.userName,queryParams.status]);

  useEffect(() => {
    fetchData();
  }, [queryParams.pageIndex]);


  const onPageChange = (pageIndex) => {
    setQueryParams({ ...queryParams, pageIndex: pageIndex });
  }

  const onSearchingData = () => {
    setQueryParams({ ...queryParams, pageIndex: 1 });
    fetchData();
  }



  const userNameChanged = (e) => {
    setQueryParams({ ...queryParams, userName: e.target.value });
  }

  const statusChange = (e) => {
    setQueryParams({ ...queryParams, status: e.target.value });
  }

  const goEditorInfo = (id) => {
    CommonService.setLoading(true);
    UserService.cloneUserSheet({ id: id }).then((res) => {
      if (res.success) {
        navigate(`/app/SheetEditor/${id}`);
      } else {
        NotificationManager.success(res.msg, '提示');
      }
    }).finally(() => {
      CommonService.setLoading(false);
    });
  }


  return (
    <>
      <div className="w-full p-4 card  bg-base-100">
        <div className="flex flex-col ">
          <div className="flex flex-row items-baseline justify-start">
            <div className="flex flex-row items-baseline justify-start mx-2">
              <div className="text-sm font-semibold">考生姓名</div>
              <input type="text" className="input input-bordered w-60  mx-2" value={queryParams.userName} onChange={userNameChanged} />
            </div>
            <div className="flex flex-row items-baseline justify-start mx-2" >
              <div className="text-sm font-semibold">进行状态</div>
              <select className="select select-bordered w-60 mx-2" value={queryParams.status} onChange={statusChange}>
                {StudentStatus.map((item, index) => {
                  return <option key={index} value={item.key} >{item.value}</option>
                })
                }
              </select>
            </div>
            <div className="flex flex-row items-baseline justify-start mx-2">
              <button className="btn btn-sm bg-primary text-white" onClick={onSearchingData}><MagnifyingGlassIcon className="w-4 h-4" />查询</button>
            </div>
          </div>
        </div>
      </div>
      <div className="flex flex-col">
        <TitleCard title="我的考生" topMargin="mt-2" >
          <table className="table table-zebra bg-base-100 rounded-sm  border-1">
            <thead>
              <tr className=" border-b-2 border-base-100">
                <th className=" text-center">序号</th>
                <th className=" text-center">考生姓名</th>
                <th className=" text-center">基本信息</th>
                <th className=" text-center">电话</th>
                <th className=" text-center">加入时间</th>
                <th className=" text-center">状态</th>
                <th className=" text-center">卡号</th>
                <th className=" text-center">操作</th>
              </tr>
            </thead>
            <tbody>
              {data && data.length > 0 ? (
                data.map((item, index) => {
                  return (
                    <tr key={index}>
                      <th className=" text-center">{item.index}</th>
                      <td className=" text-center">{item.userName}</td>
                      <td className=" text-center">{item.userSubjects}/{item.userScore}</td>
                      <td className=" text-center">{item.userPhone}</td>
                      <td className=" text-center">{item.userAdmitAtStr}</td>
                      <td className=" text-center">{item.status}</td>
                      <td className=" text-center">{item.cardNO}</td>
                      <td className=" text-center">
                        <div className="flex flex-row items-center justify-around ">
                           <button className="btn btn-sm text-green-500 btn-link"  onClick={()=> navigate(`/app/studentDetail/${item.id}`)}><EyeIcon className="w-4 h-4" />查看</button>
                          <button className="btn btn-sm text-cyan-600 btn-link" onClick={() => goEditorInfo(item.id)}><NewspaperIcon className="w-4 h-4" />规划师志愿单</button>
                        </div>
                      </td>
                    </tr>
                  );
                })
              ) : (
                <tr>
                  <td colSpan="7">暂无数据</td>
                </tr>
              )}
            </tbody>
          </table>
          <div className="flex flex-row items-center justify-center">
            <Pagination currentPage={queryParams.pageIndex} totalCount={total} onPageChange={onPageChange} />
          </div>
          <div className="flex flex-col items-start justify-between text-xs my-2 p-2 bg-base-300 rounded-md" style={{ lineHeight: '20px' }}>
            <p>规划师负责的考生列表</p>
              <p>1.点击【查看】，查看考生的分数、选科、区域等喜好信息，和考生的志愿单列表</p>
              <p>2.点击【规划师志愿单】，创建考生志愿单副本，经和考生沟通后对志愿单进行增删操作，</p>
              <p>3.志愿单完成后完成后打印志愿单为pdf，通过email邮寄给考生，考生确认无误后发送回执，结束服务。</p>
          </div>
        </TitleCard>

      </div>
    </>
  );
}

export default MineUser;
